<template>
  <div>
    <span>订单统计</span>
      <el-card class="box-card">
        <el-form
          :inline="true"
          :model="formInline"
          class="demo-form-inline"
          ref="formInline"
          :rules="rules"
        >
          <el-col :span="7">
            <el-form-item label="商户ID/名称：" prop="merchantNameId">
              <el-input v-model="formInline.merchantNameId"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="日期" prop:="dateTime">
              <el-date-picker
                v-model="formInline.dateTime"
                type="daterange"
                value-format="timestamp"
                :clearable="false"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="行业" prop="presentType">
              <el-select v-model="formInline.industry">
                <el-option label="全部" value="全部"></el-option>
                <el-option label="便利百货" value="便利百货"></el-option>
                <el-option label="家庭用品" value="家庭用品"></el-option>
                <el-option label="生计用品" value="生计用品"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :offset="17">
            <el-form-item>
              <el-button type="primary" @click="onSubmit">查询</el-button>
              <el-button @click="resetForm('formInline')">重置</el-button>
            </el-form-item>
          </el-col>
        </el-form>
      </el-card>
      <el-col :span="4" align="center">
        <el-tag>订单数量：{{orderSum}}</el-tag>
      </el-col>
      <el-col :span="4" align="center">
        <el-tag type="success">订单总金额：{{orderAmount}}</el-tag>
      </el-col>
      <el-col :span="4" align="center">
        <el-tag type="info">退款/售后订单数量：{{afterSaleOrderSum}}</el-tag>
      </el-col>
      <el-col :span="4" align="center">
        <el-tag type="warning">退款/售后率：{{(afterSaleOrderSum/orderSum * 100).toFixed(1)}}%</el-tag>
      </el-col>
      <el-col :span="4" align="center">
        <el-tag type="danger">确认退款订单数量：{{OKafterSaleOrderSum}}</el-tag>
      </el-col>
      <el-col :span="4" align="center">
        <el-tag>确认退款率：{{(OKafterSaleOrderSum/afterSaleOrderSum*100).toFixed(1)}}%</el-tag>
      </el-col>
      <el-table
        :data="orderStatList"
        stripe
        style="width: 100%"
      >
        <el-table-column
          align="center"
          v-for="(item,index) in orderStatListHD"
          :key="index"
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
        >
          <template v-if="item.prop==='orderAmount'||item.prop==='OKafterSaleSum'" v-slot="{ row }">
            <span>{{row.orderAmount}}</span>
          </template>
        </el-table-column>
      </el-table>
      <el-row type="flex" justify="center" align="middle" style="height: 60px">
      <el-pagination
        background
        algin="center"
        layout="sizes, prev, pager, next"
        :current-page="pagination.page"
        :page-size="pagination.size"
        :total="pagination.total"
        :page-sizes="[2, 3, 5, 10]"
        @size-change="handleSizeChange"
        @current-change="changePage"
      >
      </el-pagination>
      </el-row>
  </div>
</template>

<script>
import { getOrderStatListHD, getOrderStatList } from '@/api/order'
import { queryFn } from '@/utils'
export default {
  name: 'ShopsOrderstatistics',

  data () {
    return {
      formInline: {
        merchantNameId: '',
        industry: '全部',
        dateTime: []
      },
      rules: {
        merchantNameId: [
          // { required: true, message: '商户ID/名称不能为空' }
        ],
        industry: [
          // { required: true, message: '请选择活动区域', trigger: 'change' }
        ],
        dateTime: [
          // { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
        ]
      },
      orderStatListHD: [],
      // orderStatListHD: [
      //   {
      //     prop: 'merchantId',
      //     label: '商户ID',
      //     width: 120
      //   }, {
      //     prop: 'merchantName',
      //     label: '商户名称',
      //     width: 120
      //   }, {
      //     prop: 'industry',
      //     label: '行业',
      //     width: 160
      //   }, {
      //     prop: 'orderSum',
      //     label: '订单总数量',
      //     width: 180
      //   }, {
      //     prop: 'orderAmount',
      //     label: '订单总金额',
      //     width: 180
      //   }, {
      //     prop: 'afterSaleOrderSum',
      //     label: '退款/售后订单数量',
      //     width: 180
      //   }, {
      //     prop: 'afterSalenNum',
      //     label: '退款/售后率',
      //     width: 180
      //   }, {
      //     prop: 'OKafterSaleOrderSum',
      //     label: '确认退款订单数量',
      //     width: 180
      //   }, {
      //     prop: 'OKafterSaleSum',
      //     label: '确认退款金额',
      //     width: 180
      //   }, {
      //     prop: 'OKafterSaleNum',
      //     label: '确认退款率',
      //     width: 180
      //   }
      // ],
      orderStatList: [],
      // orderStatList: [{
      //   merchantId: '001',
      //   merchantName: '美宜佳-保利店',
      //   industry: '便利百货',
      //   orderSum: '300',
      //   orderAmount: 'xxxx.xx元',
      //   afterSaleOrderSum: '9',
      //   afterSalenNum: '3%',
      //   OKafterSaleOrderSum: '6',
      //   OKafterSaleSum: 'xxxx.xx元',
      //   OKafterSaleNum: '66.6%'
      // }]
      pagination: {
        page: 1,
        size: 5,
        total: 7
      }
    }
  },
  created () {
    this.getOrderStatList()
    this.getOrderStatListHD()
  },

  mounted () {

  },
  computed: {
    orderSum () {
      let sum = 0
      this.orderStatList.forEach(item => {
        sum += item.orderSum
      })
      return sum
    },
    orderAmount () {
      let sum = 0
      this.orderStatList.forEach(item => {
        sum += item.orderAmount
      })
      return sum
    },
    afterSaleOrderSum () {
      let sum = 0
      this.orderStatList.forEach(item => {
        sum += item.afterSaleOrderSum
      })
      return sum
    },
    OKafterSaleOrderSum () {
      let sum = 0
      this.orderStatList.forEach(item => {
        sum += item.OKafterSaleOrderSum
      })
      return sum
    }
  },

  methods: {
    changePage (newpage) {
      this.pagination.page = newpage
      this.getOrderStatList()
    },
    handleSizeChange (newsize) {
      this.pagination.size = newsize
      this.getOrderStatList()
    },
    async onSubmit () {
      // console.log('submit!')
      const res = queryFn({
        merchantId: +this.formInline.merchantNameId ? +this.formInline.merchantNameId : '',
        merchantName: +this.formInline.merchantNameId ? '' : this.formInline.merchantNameId,
        industry: this.formInline.industry === '全部' ? '' : this.formInline.industry,
        time_gte: this.formInline.dateTime[0],
        time_lte: this.formInline.dateTime[1]
      })
      // u_age_gte=10&u_age_lte=20
      const { data } = await getOrderStatList(res)
      this.pagination.total = data.length
      this.orderStatList = data
    },
    resetForm (formName) {
      this.formInline.dateTime = []
      this.$refs[formName].resetFields()
    },
    handleClick (tab, event) {
      // console.log(tab, event)
    },
    async getOrderStatList () {
      const { data } = await getOrderStatList({
        _page: this.pagination.page,
        _limit: this.pagination.size
      })
      this.orderStatList = data
    },
    async getOrderStatListHD () {
      const { data } = await getOrderStatListHD()
      this.orderStatListHD = data
    }
  }
}
</script>

<style lang="less" scoped>
.box-card {
    width: 100%;
    margin: 20px 0;
}
</style>
